<template>
  <view class="page-container">
    <!-- 顶部带背景色的导航栏 -->
    <view class="nav-bar">
      <image
        class="back-icon"
        src="../../static/icons/back.png"
        @tap="goBack"
      />
      <text class="nav-title">退住申请（{{ customerName }}）</text>
    </view>

    <!-- 表单区域，放在背景下半部分 -->
    <scroll-view class="scroll-content" scroll-y>
      <view class="form-wrapper">
        <!-- 客户姓名（只读） -->
        <view class="form-item">
          <text class="label">客户姓名</text>
          <input
            class="input readonly-input"
            v-model="form.customerName"
            readonly
          />
        </view>

        <!-- 退住类型 -->
        <view class="form-item">
          <text class="label">退住类型</text>
          <picker
            mode="selector"
            :range="typeOptions"
            :value="form.typeIndex"
            @change="onTypeChange"
          >
            <view class="picker editable-picker">
              {{ form.typeIndex !== null 
                 ? typeOptions[form.typeIndex] 
                 : '请选择退住类型' 
              }}
              <image class="picker-icon" src="/static/icons/dropdown.png"/>
            </view>
          </picker>
        </view>

        <!-- 退住原因 -->
        <view class="form-item">
          <text class="label">退住原因</text>
          <input
            class="input editable-input"
            v-model="form.reason"
            placeholder="请输入退住原因"
          />
        </view>

        <!-- 退住时间 -->
        <view class="form-item">
          <text class="label">退住时间</text>
          <picker
            mode="date"
            :value="form.checkOutDateDate"
            @change="onDateChange"
          >
            <view class="picker editable-picker">
              {{ form.checkOutDateDate || '请选择退住时间' }}
              <image class="picker-icon" src="/static/icons/calendar.png"/>
            </view>
          </picker>
        </view>
      </view>
    </scroll-view>

    <!-- 固定在底部的确认按钮 -->
    <view class="footer">
      <button class="btn-submit" @tap="onSubmit">确认</button>
    </view>
  </view>
</template>

<script>
import { addCheckoutRecord } from '@/api/client'

export default {
  name: 'CheckoutRequest',
  data() {
    return {
      customerId: null,
      customerName: '',
      typeOptions: ['正常退住', '死亡退住', '保留床位'],
      form: {
        customerId: null,
        customerName: '',
        typeIndex: null,
        reason: '',
        checkOutDateDate: ''
      }
    }
  },
  onLoad(options) {
    this.customerId   = +options.customerId
    this.customerName = decodeURIComponent(options.customerName || '')
    this.form.customerId   = this.customerId
    this.form.customerName = this.customerName
  },
  methods: {
    onTypeChange(e) {
      this.form.typeIndex = +e.detail.value
    },
    onDateChange(e) {
      this.form.checkOutDateDate = e.detail.value + ' 00:00:00'
    },
    goBack() {
      uni.navigateBack()
    },
    async onSubmit() {
      if (this.form.typeIndex === null) {
        return uni.showToast({ title: '请选择退住类型', icon: 'none' })
      }
      if (!this.form.reason) {
        return uni.showToast({ title: '请输入退住原因', icon: 'none' })
      }
      if (!this.form.checkOutDateDate) {
        return uni.showToast({ title: '请选择退住时间', icon: 'none' })
      }

      const dto = {
        customerId:   this.form.customerId,
        customerName: this.form.customerName,
        type:         this.form.typeIndex + 1,
        reason:       this.form.reason,
        checkOutDate: this.form.checkOutDateDate,
        approvalStatus: 1
      }

      try {
        await addCheckoutRecord(dto)
        uni.showToast({ title: '申请提交成功', icon: 'success' })
        setTimeout(() => this.goBack(), 800)
      } catch (err) {
        console.error('添加退住申请失败', err)
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f1f9f9;
}

/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 130px;
  padding-top: 55px;
  padding: 0 16px;
  background-image: url('/static/images/background1.png');
  background-size: cover;
  background-position: center;
}
.back-icon {
  width: 24px;
  height: 24px;
}
.nav-title {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

/* 滚动区 */
.scroll-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 表单容器 */
.form-wrapper {
  padding: 16px;
  height: 600px;
  /* 由单色改为从白到 #f1f9f9 的渐变 */
    background: linear-gradient(to bottom, #ffffff 0%, #f1f9f9 100%);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding-bottom: 100px;
}
.form-item {
  margin-bottom: 16px;
}
.label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
}

/* 可编辑输入框 */
.editable-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #00c3b0;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
}

/* 只读输入框 */
.readonly-input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f5f5f5;
  color: #888;
}

/* 可编辑的 picker */
.editable-picker {
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  border: 1px solid #00c3b0;
  border-radius: 6px;
  background-color: #fff;
  position: relative;
  font-size: 14px;
}

/* 通用 picker 图标 */
.picker-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}

/* 底部按钮 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.btn-submit {
  width: 100%;
  height: 40px;
  background-color: #00c3b0;
  color: #fff;
  font-size: 16px;
  border-radius: 20px;
}
</style>
